<template>
    <div class="container">
        <Header class="header" :class="hidden == true? 'on':''">
            <div class="menu-btn" v-if="hidden == true" @click="openBtn = true">
                <img src="../assets/menu.png" alt="">
            </div>
            <div class="header-left">躺猪后台管理系统</div>
            <div class="header-right">
                <Button type="primary" @click="toLogin">退出登录</Button>
            </div>
        </Header>
        <Content class="content" :class="[hidden == true? 'on':'',openBtn == true? 'in':'']">
            <!-- 侧边导航栏 -->
            <Sider hide-trigger>
                <Row>
                    <Col span="8">
                        <Menu ref="side_menu" :theme="theme2" :active-name="systemPath" :open-names="currentIndex" accordion @on-select="toPath">
                            <MenuItem name="/allmessage">
                                <Icon type="ios-paper" />
                                首页
                            </MenuItem>
                            <Submenu name="1">
                                <template slot="title">
                                    <Icon type="ios-paper" />
                                    销售
                                </template>
                                <MenuItem v-for="item in salesList" :name="item.path" :key="item.id">
                                    {{item.text}}
                                </MenuItem>
                            </Submenu>
                            <Submenu name="2">
                                <template slot="title">
                                    <Icon type="ios-paper" />
                                    经纪人管理
                                </template>
                                <MenuItem v-for="item in businessManList" :name="item.path" :key="item.id">
                                    {{item.text}}
                                </MenuItem>
                            </Submenu>
                            <Submenu name="3">
                                <template slot="title">
                                    <Icon type="ios-paper" />
                                    楼盘管理
                                </template>
                                <MenuItem v-for="item in roomList" :name="item.path" :key="item.id">
                                    {{item.text}}
                                </MenuItem>
                            </Submenu>
                            <Submenu name="4">
                                <template slot="title">
                                    <Icon type="ios-paper" />
                                    品牌管理
                                </template>
                                <MenuItem v-for="item in brandList" :name="item.path" :key="item.id">
                                    {{item.text}}
                                </MenuItem>
                            </Submenu>
                        </Menu>
                    </Col>
                </Row>
            </Sider>
        </Content>
        <Footer>
            <router-view></router-view>
        </Footer>
        <div class="mask" v-if="openBtn == true" @click="openBtn = false"></div>
    </div>
</template>
<script>
import {mapActions,mapState} from 'vuex'
export default {
    data(){
        return{
            theme2: 'dark',
            salesList:[
                {text:'商机',path:"/business",id:0},
                {text:'资源库',path:"/customer",id:1},
            ],
            businessManList:[
                {text:'经纪人',path:"/worker",id:0}
            ],
            roomList:[
                {text:'楼盘',path:"/roomsystem",id:0}
            ],
            brandList:[
                {text:'品牌信息',path:"/brand/message",id:0},
                {text:'招商商机',path:"/invite/business",id:1},
                {text:'加盟商机',path:"/join/business",id:2}
            ],
            currentIndex:[''],
            hidden:false,
            openBtn:false
        }
    },
    computed:{
        ...mapState(["systemPath"]),
    },
    created(){
        if(this.systemPath=='/business'||this.systemPath=='/customer'){
            this.currentIndex=['1']
        }
    },
    mounted(){
        this.listenerFunction();
    },
    beforeDestroy () {
      document.removeEventListener("scroll", this.listenerFunction);
    },
    methods:{
        ...mapActions(["Logout"]),
        // 退出登录
        toLogin(){
            this.Logout()
            this.$router.push({path:'/login'})

        },
        // 二级栏目路由跳转
        toPath(name){
            console.log(name)
            this.$router.push({path:name})
        },
        // 下拉监听开始
        listenerFunction(e) {
            document.addEventListener('scroll', this.handleScroll, true);
        },
        handleScroll () {
            var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            // console.log(scroll)
            if(scroll>=250){
                this.hidden = true
            }else{
                this.hidden = false
                this.openBtn = false
            }
        },
        // 下拉监听结束

        open(){
            this.openBtn = true
        },
    }
}
</script>
<style lang="less" scoped>
// 全局样式
html,body,#app{
  // 需要将height设为auto，才能监听高度变化
  height: auto!important;
  margin: 0;
  padding: 0;
  width:100%;
  overflow-x:hidden;
}
.container{
    color: #333;
}
/deep/.ivu-layout-sider{
    width: 100%!important;
    max-width: 100%!important;
}
/deep/.ivu-row{
    display: block!important;
}
/deep/.ivu-col-span-8{
    max-width: 100%;
}
/deep/.ivu-menu.ivu-menu-dark.ivu-menu-vertical{
    width: 100%!important;
}
/deep/.ivu-layout-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    .header-left{
        font-weight: 600;
        color: #fff;
        font-size: 0.34rem;
    }
}
/deep/.ivu-layout-footer{
    padding: 24px 10px!important;
}
.header.on{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}
.content.on{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    transform: translateX(-200px);
    height: 100%;
}
.content.on.in{
    transform: translateX(0px);
    top: 0;
    position: fixed;
    height: 100%;
    transition: all 0.3s;
}
/deep/ .ivu-layout-sider{
    height: 100%;
}
.menu-btn{
    img{
        display: block;
        width: 0.55rem;
        height: 0.45rem;
    }
}
.mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 8888;
}
</style>